<template>
  <el-row type="flex" justify="end" class="user-info-header">
    <el-col :span="3">
      <!-- <el-link><i class="el-icon-user-solid"></i>{{ $store.state.userInfo.adminName }}</el-link> -->
      <!-- <el-link><i class="el-icon-user-solid"></i>{{ userInfo.adminName }}</el-link> -->
      <!-- <el-link><i class="el-icon-user-solid"></i>{{ userInfo2 }}</el-link> -->

      <!-- getters(): -->
      <!-- <el-link><i class="el-icon-user-solid"></i>{{ $store.getters.getUserName }}</el-link> -->
      <el-link><i class="el-icon-user-solid"></i>{{ getUserName }}</el-link>

      <el-button class="exit-system" type="primary" size="small" icon="el-icon-switch-button">退出</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'DEMOUserInfo',

  data() {
    return {}
  },
  computed: {
    // 映射state到计算属性
    /* 
      ...mapState({
      // userInfo: state => state.userInfo
      userInfo: 'userInfo', // 等于  userInfo: state => state.userInfo
      userInfo2(state) {
        // 这个普通函数中，可以使用this.
        return state.userInfo.adminName + ',先生'
      }
    }) 
    */

    // ...mapState(['userInfo'])

    // ...mapGetters({
    //   UserName: 'getUserName'
    // }),
    ...mapGetters('three', ['getUserName']) // 后面启用module后的写法。
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="less" scoped>
.user-info-header {
  background-color: #f5efef;
  height: 80px;
  line-height: 80px;
  margin: 0 -20px;
  text-align: right;
}

.exit-system {
  margin: 0 10px;
}
</style>
